<template>
  <div class="branches">
    <div style="margin: 20px">
      <el-page-header
        content="车辆详情"
        @back="$router.push('/transit/vehicle')"
      />
    </div>
    <div class="app-container">
      <div class="background">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 车辆 -->
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="driverForm">
              <el-row type="flex" justify="space-between">
                <el-form-item label="车辆编号:" label-width="200px">
                  <el-input
                    v-if="driverShow === true"
                    v-model="driverForm.id"
                    disabled
                    medium
                    style="width: 250px"
                    type="text"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 200px"
                    display="display: inline-block;"
                  >
                    {{ driverForm.id }}
                  </div>
                </el-form-item>
                <el-form-item label="车牌号码:" label-width="200px">
                  <el-input
                    v-if="driverShow === true"
                    v-model="driverForm.licensePlate"
                    disabled
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 200px"
                    display="display: inline-block;"
                  >
                    {{ driverForm.licensePlate }}
                  </div>
                </el-form-item>
                <el-form-item label="车型名称:" label-width="200px">
                  <el-input
                    v-if="driverShow === true"
                    v-model="driverForm.truckTypeName"
                    disabled
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 200px"
                    display="display: inline-block;"
                  >
                    {{ driverForm.truckTypeName }}
                  </div>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="车辆体积:" label-width="200px">
                  <el-input
                    v-if="driverShow === true"
                    v-model="driverForm.allowableVolume"
                    disabled
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 200px"
                    display="display: inline-block;"
                  >
                    {{ driverForm.allowableVolume }}
                  </div>
                </el-form-item>

                <el-form-item label="车辆载重:" label-width="200px">
                  <el-input
                    v-if="driverShow === true"
                    v-model="driverForm.allowableLoad"
                    disabled
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 200px"
                    display="display: inline-block;"
                  >
                    {{ driverForm.allowableLoad }}
                  </div>
                </el-form-item>

                <el-form-item label="GPSID:" label-width="200px">
                  <el-input
                    v-if="driverShow === true"
                    v-model="driverForm.deviceGpsId"
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 200px"
                    display="display: inline-block;"
                  >
                    {{ driverForm.deviceGpsId }}
                  </div>
                </el-form-item>
              </el-row>
              <el-form-item label="图片信息:" label-width="200px">
                <el-upload
                  :disabled="!drivingShow"
                  :file-list="defaultFileList"
                  action="#"
                  list-type="picture-card"
                  :before-upload="beforeAvatarUpload"
                  :http-request="onUpload"
                >
                  <i v-if="drivingShow" slot="default" class="el-icon-upload2">
                    <template>
                      <span style="font-size: 12px"> 上传图片</span>
                    </template>
                  </i>

                  <i
                    v-if="!drivingShow"
                    slot="default"
                    class="el-icon-circle-close"
                  >
                    <template>
                      <span style="font-size: 12px" />
                    </template>
                  </i>

                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        v-if="drivingShow === true"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <div v-if="!driverShow" class="button">
                <el-button
                  type="primary"
                  @click="driverShow = true"
                >编辑</el-button>
              </div>
              <div v-if="driverShow" class="button">
                <el-button type="primary" @click="driverSave">保存</el-button>
                <el-button @click="driverCancel">取消</el-button>
              </div>
            </el-form>
          </el-tab-pane>
          <!-- 车辆 -->

          <!-- 行驶证 -->
          <el-tab-pane label="行驶证信息" name="second">
            <el-form :model="drivingForm">
              <el-row type="flex" justify="space-between">
                <el-form-item label="行驶证号:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.transportCertificateNumber"
                    medium
                    style="width: 250px"
                    type="text"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.transportCertificateNumber }}
                  </div>
                </el-form-item>

                <el-form-item label="发动机编号:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.engineNumber"
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.engineNumber }}
                  </div>
                </el-form-item>

                <el-form-item label="注册时间,:" label-width="200px">
                  <el-date-picker
                    v-if="drivingShow === true"
                    v-model="drivingForm.registrationDate"
                    type="date"
                    placeholder="选择日期"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.registrationDate }}
                  </div>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="国家强制报废日期:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.mandatoryScrap"
                    medium
                    type="text"
                    style="width: 250px"
                  >
                    <template slot="append">年</template>
                  </el-input>
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.mandatoryScrap }}年
                  </div>
                </el-form-item>
                <el-form-item label="检验有效期:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.expirationDate"
                    medium
                    type="text"
                    style="width: 250px"
                  >
                    <template slot="append">年</template>
                  </el-input>
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.expirationDate }}年
                  </div>
                </el-form-item>
                <el-form-item label="行驶证有效期,:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.validityPeriod"
                    medium
                    type="text"
                    style="width: 250px"
                  >
                    <template slot="append">年</template>
                  </el-input>
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.validityPeriod }}年
                  </div>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="整备质量:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.overallQuality"
                    medium
                    type="text"
                    style="width: 250px"
                  >
                    <template slot="append">年</template>
                  </el-input>
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.overallQuality }}年
                  </div>
                </el-form-item>

                <el-form-item label="核定载质量:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.allowableWeight"
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.allowableWeight }}
                  </div>
                </el-form-item>

                <el-form-item label="外廓尺寸:" label-width="200px">
                  <el-input
                    v-if="drivingShow === true"
                    v-model="drivingForm.outsideDimensions"
                    medium
                    type="text"
                    style="width: 250px"
                  />
                  <div
                    v-else
                    style="font-size: 16px; width: 250px"
                    display="display: inline-block;"
                  >
                    {{ drivingForm.outsideDimensions }}
                  </div>
                </el-form-item>
              </el-row>
              <el-form-item label="图片信息:" label-width="200px">
                <div>
                  <el-upload
                    :disabled="!drivingShow"
                    :file-list="defaultFileList"
                    action="#"
                    list-type="picture-card"
                    :before-upload="beforeAvatarUpload"
                    :http-request="onUpload"
                  >
                    <i
                      v-if="drivingShow"
                      slot="default"
                      class="el-icon-upload2"
                    >
                      <template>
                        <span style="font-size: 12px"> 上传图片</span>
                      </template>
                    </i>

                    <i
                      v-if="!drivingShow"
                      slot="default"
                      class="el-icon-circle-close"
                    >
                      <template>
                        <span style="font-size: 12px" />
                      </template>
                    </i>

                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      >
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in" />
                        </span>
                        <span
                          v-if="drivingShow === true"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <i class="el-icon-delete" />
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </div>
              </el-form-item>

              <div v-if="!drivingShow" class="button">
                <el-button
                  type="primary"
                  @click="drivingShow = true"
                >编辑</el-button>
              </div>
              <div v-if="drivingShow" class="button">
                <el-button type="primary" @click="drivingSave">保存</el-button>
                <el-button @click="drivingCancel">取消</el-button>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getVehicleDetail,
  getTruckLicense,
  updateVehicleDetail,
  updateTruckLicense
} from '@/api/Vehicle'
import { filesImageUpload } from '@/utils/index'

export default {
  data() {
    return {
      defaultFileList: [], // 设置默认文件列表，包含两张图片的信息
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // ================
      linksArray: [], // 图片数组
      drivingShow: false, // 行驶证编辑
      // 行驶证列表
      drivingForm: {
        engineNumber: '', // 发动机编号
        registrationDate: '', // 注册时间
        transportCertificateNumber: '', // 行驶证号
        picture: '', // 图片
        mandatoryScrap: '', // 国家强制报废日期
        expirationDate: '', // 检验有效期
        overallQuality: '', // 整备质量
        allowableWeight: '', // 核定载质量
        outsideDimensions: '', // 外廓尺寸
        validityPeriod: '' // 行驶证有效期
      },
      // 车辆列表
      driverShow: false,
      activeName: 'first',
      driverForm: {
        id: '', // 车辆编号
        licensePlate: '', // 车牌号码
        truckTypeName: '', // 车型名称
        allowableVolume: '', // 车型体积
        allowableLoad: '', // 车辆载重
        picture: '' // 图片信息
      }
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    // tab栏
    handleClick(tab) {
      if (tab.index === '1') {
        this.getTruckLicenseForm()
      } else {
        this.getDetails()
      }
    },
    // 车辆基本信息

    async getDetails() {
      // console.log(this.$route)
      this.id = this.$route.params.id
      const res = await getVehicleDetail(this.id)
      // console.log(res)
      this.driverForm = res.data
      this.driverForm.newAge = res.data.age
      this.drivingForm.userId = res.data.userId
    },
    // 车辆-取消
    driverCancel() {
      // 恢复原本数据
      // console.log(this.driverForm)
      this.driverForm.age = this.driverForm.newAge
      this.driverShow = false
    },
    // 车辆-保存
    async driverSave() {
      await updateVehicleDetail(this.driverForm, this.$route.params.id)
      this.$message.success('保存成功')
      // console.log(res)
      // 关闭
      this.driverShow = false
    },
    // 行驶证-列表
    async getTruckLicenseForm() {
      this.id = this.$route.params.id
      const res = await getTruckLicense(this.id)
      console.log('行驶证-列表', res.data)
      // console.log(res.data.picture)
      this.drivingForm = res.data
      if (res.data.picture) {
        const linksArray = res.data.picture
          .split(',')
          .map((link) => link.trim())
        this.defaultFileList = linksArray.map((link) => ({ url: link }))
        // 存旧数据-图片
        this.drivingForm.newpicture = linksArray.map((link) => ({ url: link }))
      }
      // 存旧数据
      this.drivingForm.newengineNumber = res.data.engineNumber
      this.drivingForm.newdriverAge = res.data.driverAge
      this.drivingForm.newregistrationDate = res.data.registrationDate
      this.drivingForm.newid = res.data.id
      this.drivingForm.newlicenseType = res.data.licenseType
      this.drivingForm.newpassCertificate = res.data.passCertificate
      this.drivingForm.newqualificationCertificate =
        res.data.qualificationCertificate
      this.drivingForm.newmandatoryScrap = res.data.mandatoryScrap
      // 图片
    },
    // 行驶证-取消
    drivingCancel() {
      // 恢复数据
      this.drivingForm.engineNumber = this.drivingForm.newengineNumber
      this.drivingForm.driverAge = this.drivingForm.newdriverAge
      this.drivingForm.registrationDate = this.drivingForm.newregistrationDate
      this.drivingForm.transportCertificateNumber = this.drivingForm.newid
      this.drivingForm.licenseType = this.drivingForm.newlicenseType
      this.drivingForm.passCertificate = this.drivingForm.newpassCertificate
      this.drivingForm.qualificationCertificate =
        this.drivingForm.newqualificationCertificate
      this.drivingForm.mandatoryScrap = this.drivingForm.newmandatoryScrap
      //  图片
      this.defaultFileList = this.drivingForm.newpicture
      // 关闭
      this.drivingShow = false
    },
    // 行驶证-保存
    async drivingSave() {
      delete this.drivingForm.newengineNumber
      delete this.drivingForm.newdriverAge
      delete this.drivingForm.newregistrationDate
      delete this.drivingForm.newid
      delete this.drivingForm.newlicenseType
      delete this.drivingForm.newpassCertificate
      delete this.drivingForm.newqualificationCertificate
      delete this.drivingForm.newmandatoryScrap
      delete this.drivingForm.newpicture
      // 图片
      // console.log(this.defaultFileList)
      if (this.defaultFileList[1].url) {
        this.drivingForm.picture =
          this.defaultFileList[0].url + ',' + this.defaultFileList[1].url
      } else {
        this.drivingForm.picture = this.defaultFileList[0].url
      }
      this.drivingForm.transportCertificateNumber = Number(
        this.drivingForm.transportCertificateNumber
      )
      this.drivingForm.userId = Number(this.drivingForm.userId)
      console.log('表单', this.drivingForm)
      const res = await updateTruckLicense(this.drivingForm)
      console.log('保存成功', res)
      this.getTruckLicenseForm()
      this.$message.success('保存成功')
      this.drivingShow = false
    },
    // ======================
    // 上传-删除图片
    handleRemove(file) {
      // 移除
      const index = this.defaultFileList.findIndex(
        (obj) => file.url === obj.url
      )
      if (index !== -1) {
        this.defaultFileList.splice(index, 1)
      }
    },
    // 上传-查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传-检验
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(
        file.type
      )
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('支持扩展名：.jpeg .png .jpg')
      }
      if (!isLt2M) {
        this.$message.error('上传大小不能超过 5MB!')
      }
      if (this.defaultFileList.length === 2) {
        this.$message.error('最多上传两张照片!')
        return false
      }
      return isJPG && isLt2M
    },
    // 上传
    async onUpload(e) {
      const formData = new FormData()
      formData.append('file', e.file)
      // console.log(formData)
      const res = await filesImageUpload(formData)
      this.defaultFileList.push({ url: res.data })
      // console.log(res.data)
    }
    // 返回
    /* goBack() {
      this.$router.push(`/employee/chauffeur/index`)
    } */
  }
}
</script>

<style>
.branches {
  margin-left: 20px;
  margin-right: 20px;
}
.background {
  background: #ffffff;
  margin-top: 25px;
  height: 700px;
  padding: 30px;
}
.el-form-item__label {
  font-size: 18px;
  font-weight: normal;
}

.el-tabs__item {
  font-size: 24px;
}
.button {
  margin-top: 200px;
  text-align: center;
}
.img2 {
  width: 212px;
  height: 159px;
}
.img3 {
  display: flex;
}
</style>
